<template>
  <div class="review-record">
    <el-row
      v-for="(item, index) in reviewRecordList"
      :key="index"
      class="border-solid border-1 border-slate-200 p-6 bg-slate-50 mb-6"
    >
      <el-col :span="12">
        <span
          class="i-ri-account-circle-fill text-gray-400 text-2xl align-middle"
        ></span>
        <span class="align-middle">{{ item.createName }}</span>
        <span class="align-middle text-gray-400">{{ item.createTime }}</span>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button
          link
          class="text-2xl"
          v-if="userStore.userInfo.userName == item.createBy"
          @click="handleDelete(item)"
          >×</el-button
        >
      </el-col>
      <el-col :span="24" class="text-gray-400">
        {{ item.content }}
      </el-col>
    </el-row>
    <div
      class="text-center p-6 border-solid border-1 border-slate-200 mb-6"
      v-if="reviewRecordList.length == 0"
    >
      <div>
        <span
          class="i-line-md-coffee-half-empty-twotone-loop text-5xl text-gray-300"
        ></span>
      </div>
      暂无批阅记录
    </div>
    <el-row v-if="limits.indexOf(userStore.userInfo.userId) !== -1">
      <el-col :span="24">
        <el-input v-model="content" placeholder="请输入批阅内容">
          <template #append>
            <el-button @click="setForm">发送</el-button>
          </template>
        </el-input></el-col
      >
    </el-row>
  </div>
</template>
<script setup name="ReviewRecord">
import { useRouter, useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import useUserStore from '@/store/modules/user'
import {
  listReportRecord,
  setReportRecord,
  delReportRecord
} from '@/api/workReport/index'
const router = useRouter()
const userStore = useUserStore()
const { proxy, type } = getCurrentInstance()
const { report_type, review_status } = proxy.useDict(
  'report_type',
  'review_status'
)

const props = defineProps({
  reviewRecordParams: {
    type: Object,
    require: false,
    default: () => {
      return {
        limits: []
      }
    }
  },
  workReportId: {
    type: [Number, String],
    require: false
  }
})
const data = reactive({
  loading: false,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0,
  reviewRecordList: [],
  limits: [],
  content: ''
})
let { loading, queryParams, total, reviewRecordList, limits, content } =
  toRefs(data)

watch(
  [() => props.workReportId],
  () => {
    if (props.workReportId) {
      let id = props.workReportId
      queryParams.value.reportId = id
      limits.value = props.reviewRecordParams.limits
        ? props.reviewRecordParams.limits
        : []
      getList()
    }
  },
  {
    immediate: true
  }
)

/** 查询列表 */
function getList() {
  loading.value = true
  listReportRecord(queryParams.value).then(response => {
    reviewRecordList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/**
 * 发送
 */
function setForm() {
  if (content.value) {
    setReportRecord({
      content: content.value,
      reportId: props.workReportId
    }).then(e => {
      proxy.$modal.msgSuccess('发送成功')
      content.value = ''
      getList()
      proxy.$emit('sending', e)
    })
  } else {
    proxy.$modal.msgError('内容不能为空')
  }
}
/** 删除按钮操作 */
function handleDelete(row) {
  const workReportIds = row.id
  proxy.$modal
    .confirm('是否删除id为"' + workReportIds + '"的批阅？')
    .then(function () {
      return delReportRecord(workReportIds)
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
    .catch(() => {})
}
// 返回、关闭页面
function handleReturn() {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
  // router.push({ path: url, query: data })
  //   proxy.$refs.form.clearValidate()
}

function init() {}
init()
</script>
<style lang="scss" scoped>
.review-record {
  :deep(.el-input__inner) {
    height: 52px;
  }
  :deep(.el-input-group__append, .el-input-group__prepend) {
    background-color: #237bff;
    .el-button {
      color: #fff;
    }
  }
}
</style>
